<template>
  <div class="q-px-md">
    <div v-for="(item,index) in alllanguage_arr" :key="`language_${index}`">
      <div class="q-my-sm">
        <span
          class="panda-border border-radius-2px right-label-icon-like inline-block text-center q-mr-sm"
          :class="`panda-border-${item.color} panda-text-${item.color}`"
        >{{item.icon}}</span>
        {{item.title}}
      </div>
      <div class="row q-my-xs" v-for="(itemi,indexi) in item.info" :key="`language_info_${indexi}`">
        <div class="col-2 text-panda-text-dark">{{itemi.source}}</div>
        <div class="col-10 text-right">{{itemi.value}}</div>
      </div>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.right-label-icon-like {
  height: 18px;
  width: 18px;
  line-height: 18px;
}
</style>
<script>
/**
 * 中文jianti  blue
 * 简称  red
 * 繁体  green
 * 英语  amber
 */
export default {
  data() {
    return {
      all_language_info: [
        {
          icon: "简",
          color: "blue",
          key:'zs',
          title: "中文简体",
          info: [
            { source: "sr", value: "趴加干" },
            { source: "bc", value: "趴加干" },
            { source: "188", value: "趴加干" }
          ]
        },

      ]
    };
  },
  props: {
    alllanguage_arr:''
  },
  methods: {}
};
</script>